<template>
	<view class="box">
		<uNavbar title="转赠" bgColor="#262241"></uNavbar>
		<view class="tab-nav">
			<view class="tab-list-item" v-for="item in toggleList" :key="item.id" @click="clickToggleHandle(item)">
				<view :class="{ active: item.select}" class="text">{{ item.label }}</view>
			</view>
	<!-- 		<view class="shaixuan">
				<image src="../../static/icon/shuaixuan1.png" mode=""></image>
			</view> -->
		</view>
		<!--我接收的 -->
		<view style="margin-top: 100rpx;">
			<view class="main_from" v-for="item in olist" :key="item.id" >
				<view class="main_from_top">
					<image :src="item.goods_image" mode="aspectFill"></image>
					<view class="name">
						{{item.goods_name}}
					</view>
					<!-- <view class="text">
						大唐盛世官方
					</view> -->
					<view class="tag_wrap">
						<view class="tag">
							编号
						</view>
						<view class="tag_num">
							{{item.goods_number}}/{{item.circulation}}
						</view>
					</view>
				<!-- 	<view class="tip">
						CDK兑换
					</view> -->
				</view>
				<view class="main_from_bottom">
					<view class="main_from_bottom_item">
						<text style="color: #A6A5AF;">发送</text>
						<text>{{item.from_phone}}</text>
					</view>
					<view class="main_from_bottom_item">
						<text style="color: #A6A5AF;">接受</text>
						<text>{{item.to_phone}}</text>
					</view>
					<view class="main_from_bottom_item">
						<text style="color: #A6A5AF;">交易时间</text>
						<text>{{item.create_time}}</text>
					</view>
				</view>
			</view>
		</view>
		<noDatas :xxxList="olist" :status="status"></noDatas>
		<view style="width: 750rpx;height: 40rpx;">
			
		</view>
	</view>

</template>

<script>
	import {transferLog} from "../../api/object.js"
	export default {
		data() {
			return {
			
				toggleList: [{
						label: '我接收的',
						select: true,
						from:1
					},
					{
						label: '我发送的',
						select: false,
						from:2
					}
				],
				fromval:1,
				page: 1,
				size: 10,
				status: 'loadmore', //加载前值为loadmore，加载中为loading，没有数据为nomore
				olist:[]
			}
		},
		onLoad() {
			this.getlist()
		},
		methods: {
			clickToggleHandle(ele) {
				this.toggleList.forEach(item => item.select = false)
				this.currLabel = ele.label
				ele.select = true
				console.log(ele.from,"sss")
				this.fromval=ele.from
				this.page=1
				this.getlist()
			},
			getlist(){
				transferLog({
					from:this.fromval,
					page:this.page
				}).then(res=>{
					if (res.code == 1) {
						let list = res.data.data;
						this.olist = this.page == 1 ? list : this.olist.concat(list);
						console.log(this.olist);
						if (list.length < this.size) this.status = 'nomore';
						else this.status = 'loading';
					}
				})
			}
		},
		onReachBottom() {
			if (this.status != 'nomore') {
				this.page = this.page + 1
				this.getlist()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		width: 750rpx;
		height: 100vh;
		background-color: #262241;
		position: relative;
	}
	.tab-nav {
		width: 750rpx;
		height: 100rpx;
		background-color: #262241;
		display: flex;
		align-items: center;
		// justify-content: ;
		
		position: fixed;
		z-index: 999;
		.shaixuan{
			width: 104rpx;
			height: 44rpx;
			margin-left: 100rpx;
			>image{
				width: 104rpx;
				height: 44rpx;
			}
		}
		.tab-list-item {
			position: relative;
			width: 350rpx;
			.text {
				display: flex;
				justify-content: center;
				align-items: center;
				margin-left: 50rpx;
				padding: 20rpx;
			
				height: 52rpx;
				opacity: 1;
				font-weight: 400;
				text-align: center;
				font-size: 32rpx;
				color: #A6A5AF;
			}

			.active {
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
			}
		}
	}

	.main_from {
		width: 690rpx;
		height: 476rpx;
		background: #3C2F65;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin: 0 auto;
		margin-top: 40rpx;
		.main_from_top {
			margin: 0 auto;
			width: 630rpx;
			height: 220rpx;
			border-bottom: 2rpx solid rgba(216, 216, 216, 0.1);
			position: relative;

			>image {
				width: 154rpx;
				height: 154rpx;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				margin-top: 30rpx;
			}

			.name {
				width: 300rpx;
				position: absolute;
				top: 36rpx;
				left: 192rpx;
				font-weight: 400;
				font-size: 32rpx;
				color: #FFFFFF;
				white-space: nowrap;
				/* 不换行 */
				overflow: hidden;
				/* 超出部分隐藏 */
				text-overflow: ellipsis;
				/* 显示省略号 */
			}
			.text{
				width: 280rpx;
				position: absolute;
				top: 86rpx;
				left: 192rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #A6A5AF;
				white-space: nowrap;
				/* 不换行 */
				overflow: hidden;
				/* 超出部分隐藏 */
				text-overflow: ellipsis;
				/* 显示省略号 */
			}
			.tag_wrap{
				width: 300rpx;
				position: absolute;
				top: 146rpx;
				left: 192rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #A6A5AF;
				white-space: nowrap;
				/* 不换行 */
				overflow: hidden;
				/* 超出部分隐藏 */
				text-overflow: ellipsis;
				display: flex;
				/* 显示省略号 */
				.tag{
					width: 64rpx;
					height: 36rpx;
					background: linear-gradient( 274deg, #0014FF 0%, #8020EF 50%, #FF2CDF 100%);
					border-radius: 6rpx 6rpx 6rpx 6rpx;
					font-size: 22rpx;
					color: #FFFFFF;
					text-align: center;
					line-height: 36rpx;
				}
				.tag_num{
					width: 150rpx;
					height: 36rpx;
					background: #2B2951;
					border-radius: 6rpx 6rpx 6rpx 6rpx;
					text-align: center;
					line-height: 36rpx;
					font-size: 24rpx;
					color: #FFFFFF;
				}
			}
			.tip{
				position: absolute;
				top: 74rpx;
				right: 0rpx;
				font-size: 36rpx;
				color: #FF2CDF;
			}
		}
		.main_from_bottom{
			width: 630rpx;
			height: 220rpx;
			margin: 0 auto;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			.main_from_bottom_item{
				display: flex;
				justify-content: space-between;
				>text{
					font-size: 26rpx;
					color: #FFFFFF;
				}
			}
		}
	}
</style>